<template>
  <a-layout-header style="background: #fff; padding: 0 20px; text-align:right;">
    <a-dropdown>
      <a class="ant-dropdown-link">{{username}}</a>
      <a-menu slot="overlay">
        <a-menu-item>
          <a @click="logout">退出</a>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
  </a-layout-header>
</template>

<script>
import { Layout, Dropdown, Menu } from "ant-design-vue";

export default {
  name: 'Header',
  components: {
    ALayoutHeader: Layout.Header,
    ADropdown: Dropdown,
    AMenu: Menu,
    AMenuItem: Menu.Item
  },
  data() {
    return {
      isDev: false,
      isLocal: false
    }
  },
  computed: {
    username() {
      return localStorage.getItem("username");
    },
  },
  methods: {
    logout(){
      ["token", "username"].forEach(e => localStorage.removeItem(e));
      this.$router.replace("/login");
    }
  },
  mounted() {
    const host = window.location.host || ''
    this.isLocal = host === 'localhost' || host === '127.0.0.1'
    this.isDev = host !== 'bootstrap-vue.js.org'
  }
}
</script>